<template>
  <uni-popup ref="popup" type="center">
    <view class="package_sale" style="width:700rpx">
      <view style="width:100%;height:60vh;overflow: auto;" v-if="labelAll">
        <view class="direction-start" style="margin-top:20rpx;">
          <view>车牌</view>
          <view class="center list" style="flex-wrap: wrap;">
            <view v-for="(item,index) in labelAll.cart" :key="index">
              <text>{{item.name}}</text>
              <uni-icons type="clear" size="20" @click="delDeatil('cart',item.id)"></uni-icons>
            </view>
            <view @click="addDeatil('cart')">
              <uni-icons type="plusempty" size="20"></uni-icons>
            </view>
          </view>
        </view>
        <view class="direction-start" style="margin-top:20rpx;">
          <view>线路</view>
          <view class="center list" style="flex-wrap: wrap;">
            <view v-for="(item,index) in labelAll.line" :key="index">
              <text>{{item.name}}</text>
              <uni-icons type="clear" size="20" @click="delDeatil('line',item.id)"></uni-icons>
            </view>
            <view>
              <uni-icons type="plusempty" size="20" @click="addDeatil('line')"></uni-icons>
            </view>
          </view>
        </view>
        <view class="direction-start" style="margin-top:20rpx;">
          <view>标签</view>
          <view class="center list" style="flex-wrap: wrap;">
            <view v-for="(item,index) in labelAll.label" :key="index">
              <text>{{item.name}}</text>
              <uni-icons type="clear" size="20" @click="delDeatil('label',item.id)"></uni-icons>
            </view>
            <view>
              <uni-icons type="plusempty" size="20" @click="addDeatil('label')"></uni-icons>
            </view>
          </view>
        </view>
      </view>
    </view>
  </uni-popup>
  <!-- 车牌弹框 -->
  <VehiclePlatePad v-if="isShowPlatePad" @cancel="isShowPlatePad = false" @confirm="confirmPlate" />
  <Association :title="title" :place="place" ref="ation" @submit="submit"></Association>
</template>

<script setup lang="ts">
  import VehiclePlatePad from '@c/earthPushing/common/VehiclePlatePads.vue';
  import { ref } from 'vue';
  import { onLoad } from '@dcloudio/uni-app';
  import { getStaffUsersLabel } from '@/gql/earthPushing/custom';
  import Association from '@c/earthPushing/bullet-box/association.vue';
  import { toPublish } from '@mqtt';
  import { showLoading, errorToast, successToast } from '@/utils/prompt';
  import { getDriverID } from '@/stores/driverID';
  // static
  const staff_id = getDriverID();
  const isShowPlatePad = ref(false); //添加车牌弹框
  const numberplate = ref(''); //车牌号
  const popup = ref(null)
  const ation = ref(null)
  const user_id = ref('')
  const labelAll = ref()
  const title = ref('')
  const place = ref('')
  const type = ref('')
  const emit = defineEmits(['submit']);
  onLoad((pearm) => {
    user_id.value = pearm.id
  })
  function getStaff() {
    const payload = {
      query: getStaffUsersLabel,
      variables: {
        staff_id,
        user_id: Number(user_id.value),
      },
    };
    toPublish(
      'ql/staff/getStaffUsersLabel',
      payload,
      (obj : any) => {
        const { getStaffUsersLabel } = obj.data;
        labelAll.value = getStaffUsersLabel
      })
  }
  /**
   * 打开/关闭车牌弹框
   */
  function addDeatil(state : string) {
    type.value = state
    switch (state) {
      case 'cart':
        isShowPlatePad.value = true
        break;
      case 'line':
        title.value = "线路"
        place.value = "请输入线路"
        ation.value.open()
        break;
      case 'label':
        title.value = "标签"
        place.value = "请输入用户标签"
        ation.value.open()
        break;
    }
  }
  //删除编辑信息
  function delDeatil(state : string, id : number) {
    showLoading()
    const payload = {
      id,
      type: state
    };
    toPublish('staff/delStaffUsersLabel',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          getStaff()
          emit('submit')
        } else {
          errorToast(msg)
        }
      }
    );
  }
  function submit(name : string) {
    ation.value.close()
    addInfor(name)
  }
  //新增车牌
  function confirmPlate(plate : string) {
    numberplate.value = plate;
    isShowPlatePad.value = false;
    addInfor(plate)
  }
  //新增用户编辑信息
  function addInfor(name : string) {
    showLoading()
    const payload = {
      staff_id,
      user_id: Number(user_id.value),
      name,
      type: type.value
    };
    toPublish('staff/addStaffUsersLabel',
      payload,
      (obj : any) => {
        const { code, msg } = obj;
        if (code === 1) {
          successToast(msg)
          getStaff()
          emit('submit')
        } else {
          errorToast(msg)
        }
      }
    );
  }
  function open() {
    popup.value.open();
  }
  function close() {
    popup.value.close();
  }
  defineExpose({
    open,
    close,
    getStaff,
  });
</script>

<style scoped lang="less">
  .list {
    view {
      min-width: 153rpx;
      height: 50rpx;
      padding: 0px 15rpx;
      box-sizing: border-box;
      border: 1px solid #eee;
      border-radius: 5px;
      justify-content: center;
      text-align: center;
      line-height: 50rpx;
      margin: 15rpx 40rpx 15rpx 0px;
      position: relative;

      text:nth-of-type(2) {
        position: absolute;
        top: -20rpx;
        right: -20rpx;
      }
    }
  }
</style>